<template>
    <div>
        <Breadcrumb>
            <Breadcrumb-item href="/">
                <Icon type="ios-home-outline"></Icon> 配置管理
            </Breadcrumb-item>
            <Breadcrumb-item href="">
                <Icon type="social-buffer-outline"></Icon> 网站配置
            </Breadcrumb-item>
            <Breadcrumb-item>
                <Icon type="pound"></Icon> 用户端配置
            </Breadcrumb-item>
        </Breadcrumb>
        <Form ref="formValidate" :label-width="120" style="margin-top: 20px;">
            <FormItem label="签到奖励积分">
                <Input v-model="configInfo.sign_award" placeholder="" style="width: 200px;" type="number"></Input>
            </FormItem>
            <FormItem label="轮播图" prop="operator_id">
                <div class="demo-upload-list" v-for="(item, index) in configInfo.banner_list" :key="index">
                    <img :src="baseImgeUrl + item" />
                    <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click.native="handleView(baseImgeUrl + item)"></Icon>
                        <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                    </div>
                </div>
                <Upload ref="upload" name="image" :show-upload-list="false" :on-success="handleSuccessBanner"
                    :headers="header" :format="['jpg', 'jpeg', 'png', 'mp4', 'avi']" :on-format-error="handleFormatError"
                    multiple type="drag" :action="action_url" style="display: inline-block;width:58px;">
                    <div style="width: 58px;height:58px;line-height: 58px;">
                        <Icon type="ios-camera" size="20"></Icon>
                    </div>
                </Upload>
                <Modal title="图片预览" v-model="visible">
                    <img :src="imgUrl" style="width: 100%">
                </Modal>
            </FormItem>
            <!-- <FormItem label="核销赠送积分">
                <Input v-model="configInfo.writeoff_points" placeholder="" style="width: 200px;" type="number"></Input>
            </FormItem>
            <FormItem label="直推送积分比例">
                <Input v-model="configInfo.direct_push" placeholder="" style="width: 200px;" type="number"></Input>
            </FormItem>
            <FormItem label="间推送积分比例">
                <Input v-model="configInfo.indirect_push" placeholder="" style="width: 200px;" type="number"></Input>
            </FormItem>
            <FormItem label="商品赠送积分比例">
                <Input v-model="configInfo.goods_reward_points" placeholder="" style="width: 200px;" type="number"></Input>
            </FormItem> -->


            <FormItem label="积分每日转换比例">
                <Input v-model="configInfo.writeoff_points" placeholder="" style="width: 200px;" type="number"></Input>
                <span style="margin-left: 10px;color: red;">* 每日绿色积分转消费积分的比例</span>
            </FormItem>

            <FormItem label="运费">
                <Input v-model="configInfo.freight" placeholder="" style="width: 200px;" type="number"></Input>
            </FormItem>

            <FormItem label="积分+余额付款">
              积分占比:
                <Input v-model="configInfo.points_pay_proportion" placeholder="积分支付占比" style="width: 150px;" type="number"></Input>
                &nbsp;
                积分兑换比例:
                <Input v-model="configInfo.point_redemption_ratio" placeholder="积分兑换余额比例" style="width: 200px;" type="number"></Input>
                <span style="margin-left: 10px;color: red;">* 填写0~100以内的数</span>
            </FormItem>

            <FormItem label="提现设置">
                <Row>
                    最低提现金额：
                    <Input v-model="configInfo.withdraw_config.min" placeholder="" style="width: 100px;"
                        type="number"></Input>
                    提现手续费：
                    <Input v-model="configInfo.withdraw_config.rate" placeholder="" style="width: 80px;"
                        type="number"></Input>%
                </Row>
            </FormItem>
            <FormItem label="分享背景图" class="item">
                <Upload ref="upload" name="image" :action="action_url" :show-upload-list="false" :headers="header"
                    :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccessLogo">
                    <Button icon="ios-cloud-upload-outline">点击上传</Button>
                </Upload>
            </FormItem>
            <FormItem class="item">
                <img :src="baseImgeUrl + configInfo.share_back" style="width: 100px;height: 100px;"
                    v-show="configInfo.share_back">
            </FormItem>
            <!-- <FormItem label="新人送券">
                <i-switch v-model="configInfo.newcomer_coupons" @on-change="newUserChange" />
            </FormItem>
            <FormItem label="邀请送券">
                <i-switch v-model="configInfo.inviting_coupons" @on-change="inviteChange" />
            </FormItem> -->
            <!-- <FormItem label="有效奖励">
                <Row v-for="(item, index) in configInfo.effective_purchase" :style="index != 0 ? 'margin-top: 10px;' : ''">
                    <Input v-model="item.number" style="width: 100px;" type="number"></Input>
                    奖励：<Input v-model="item.rewards" style="width: 100px;"></Input>
                    <Icon type="ios-remove-circle" size="30" style="color: #ed4014;margin-left: 10px;"
                        @click="decSku(index)" v-if="index != configInfo.effective_purchase.length - 1" />
                    <Icon type="ios-add-circle" size="30" style="color: #2d8cf0;margin-left: 10px;" @click="incrSku"
                    v-if="index == configInfo.effective_purchase.length - 1"/>
                </Row>
            </FormItem> -->
            <FormItem label="联系我们">
                <Row v-for="(item, index) in configInfo.contact_us" :style="index != 0 ? 'margin-top: 10px;' : ''">
                    <Input v-model="item.title" style="width: 150px;"></Input>
                    <Input v-model="item.desc" style="width: 300px;"></Input>
                    电话：<Input v-model="item.telephone" style="width: 100px;"></Input>
                    服务时间：<Input v-model="item.service_time" style="width: 100px;"></Input>
                    <Icon type="ios-remove-circle" size="30" style="color: #ed4014;margin-left: 10px;"
                        @click="decContactUs(index)" v-if="index != configInfo.contact_us.length - 1" />
                    <Icon type="ios-add-circle" size="30" style="color: #2d8cf0;margin-left: 10px;" @click="incrContactUs"
                    v-if="index == configInfo.contact_us.length - 1"/>
                </Row>
            </FormItem>

            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    data() {
        return {
            //运营商列表
            action_url: baseUrl + "/admin/image/uploadImg",
            baseImgeUrl: baseImgeUrl,
            imgUrl: "",
            visible: false,
            header: { token: getToken() },
            configInfo: {
                user_ratio: "",
                order_notice: "",
                banner_list: [],
                traffic_type0: {
                    start_step: "",
                    avg: "",
                    start: "",
                },
                traffic_type1: {
                    start_step: "",
                    avg: "",
                    start: "",
                },
                withdraw_config: {
                    type: [],
                    min: "",
                    max: "",
                    rate: "",
                },
                newcomer_coupons: false,
                inviting_coupons: false,
            }
        }
    },
    methods: {
        newUserChange(status) {
            this.configInfo.newcomer_coupons = status;
        },
        inviteChange(status) {
            this.configInfo.inviting_coupons = status;
        },
        getConfigInfo() {
            this.$axios('/admin/config/getConfigInfo', { type: 1 }).then(res => {
                this.configInfo = res;
                this.configInfo.newcomer_coupons = this.configInfo.newcomer_coupons == 1 ? true : false;
                this.configInfo.inviting_coupons = this.configInfo.inviting_coupons == 1 ? true : false;
            });
        },
        handleSubmit() {
            let param = { ...this.configInfo };
            param.newcomer_coupons = param.newcomer_coupons ? 1 : 0;
            param.inviting_coupons = param.inviting_coupons ? 1 : 0;
            this.$axios('/admin/config/setConfig', param).then(res => {
                this.$Message.success('保存成功');
                this.getConfigInfo();
            })
        },
        //图片类型错误
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        //下单须知
        handleSuccessLogo(res, file) {
            let src = res.data;
            this.configInfo.share_back = src.src;
        },
        //banner图或视频
        handleSuccessBanner(res, file) {
            let src = res.data.src;
            let ext = res.data.ext;
            this.configInfo.banner_list.push(src);
        },
        handleView(src) {
            this.visible = true;
            this.imgUrl = src;
        },
        handleRemove(index) {
            this.configInfo.banner_list.splice(index, 1);
        },
        // incrSku() {
        //     let attr = { "number": "", "rewards": ""};
        //     this.configInfo.effective_purchase.push(attr);
        // },
        // decSku(index) {
        //     this.configInfo.effective_purchase.splice(index, 1);
        // },

        incrContactUs() {
            let attr = {"title":"","desc":"","telephone":"","service_time":""};
            this.configInfo.contact_us.push(attr);
        },
        decContactUs(index) {
            this.configInfo.contact_us.splice(index, 1);
        },
    },
    created() {
        this.getConfigInfo();
    },
}

</script>
<style>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
